The HTML Tutor: Frames Tutorial

Frames

Frames can be great. But if used incorrectly, they can cause alot of grief to your visitors, and can make your page look cluttered and ugly. So please use them wisely. You have been warned!

As with all HTML tags, this has it's own, and it starts of with

&ltframeset> - Frameset

This replaces the &ltbody> tag in the html file. It has the following options:

rows="#, #" | "%, %" | "#*, *" - Rows
cols="#, #" | "%, %" | "#*, *" - Columns

The #'s represent pixel sizes. For example:
&ltframeset rows="100,*"> would give you two frames: one being 100 pixels tall, and the other filling in the rest.
The %'s represents the percentage of the frame. For example:
&ltframeset cols="25%, 75%"> would give you two columns: one being 25 percent of the screen, the other being 75 percent.
The #*, * represents the first frame being twice the size of the second. For example
&ltframeset rows="2*, *"> would give you the first frame being twice the size of the second.

Now for the meat of the frames. This what defines what's inside each frame. And it starts with...

&ltframe> - the Frame tag

The frame tag defines each frame within the frameset. It includes the following syntax:
&ltframe src="file.html"> - the frame source
This tells the browser what to load inside this particular frame. You can also leave it blank, or load a picture.
&ltframe name="whatever"> - the frame name
This comes in handy if you want a link in one frame to load something in another frame. You van name it whatever you want.
&ltframe noresize> - noresize
Makes it so whoever is viewing your page can't change the dimensions as he views it. Only good if you're picky, like me!
&ltframe scrolling="yes"> - the scrolling option
Allows you to define whether or not the frame can be scrolled through or not. Values are "yes", "no", and "auto".
&ltframe marginheight="number"> - the margin height
Allows you to define the height of the margin in the individual frame. Values can be from 1 to whatever.
&ltframe marginwidth="number"> - the margin width
Allows you to define the width of the margin in the individual frame. Values can be from 1 to whatever.
&ltframe frameborder="number"> - the frame border
Allows you to define whether or not there's a border between frames. Values can be from 0 to whatever.
&ltframe framespacing="number"> - frame spacing
Allows you to define the frame spacing in the individual frame. Values can be from 0 to whatever. These can really make a page look like there are no frames when there actually are. Works with Netscape 2.0+ and Microsoft Internet Explorer 3.0.

What if someone has a browser that doesn't support frames? Then add this after all your frame tags:

&ltnoframes> - the no frames tag

After this tag you can put your &ltbody> statement like you normally would. This is in case the user has an older browser, they can still see the page, just without frames. This tag has no options. Now for the fun stuff.

&lttarget> - the target value

The target value is what allows you to load files in other parts of the frame. It doesn't appear in the frames stuff. It appears in the html file itself. Lets give an example.

Lets say you want a link in #1 to load a page in #2. In the frames set up, you did this:


&ltframeset cols="150, *">
       &ltframe href="file1.html" name="#1">
       &ltframe href="file2.html" name="#2">
</frameset>

You would make your links in file1.html look like this:
&lta href="file.html" target="#2">
and you would have file2.html include the following after the &ltbody> tag:
&ltbase target="#2">

The &lttarget> tag can also include some of the following attributes:

target="_self" - this will allow the file to load in the same frame.
target="_parent" - this will allow the file to load in the same frameset.
target="_blank" - the document will load in a new blank window.
target="_top" - the link will load completely outside of the frames without starting a new instance of the browser.

Whew! You think you understand now? Well, let's see if I do. I'm going to make a frame that looks like the following:

And here would be the source for this layout:


&ltframeset rows="250,*">
     < frame src="love.html" name="love" 
     noresize scrolling ="no">

&ltframeset cols="33%, 33%, 33%">
     < frame src="plain.html" name="hope" 
     noresize scrolling ="no">
     < frame src="plain1.html" name="joy" 
     noresize scrolling ="no">
     < frame src="plain2.html" name="peace" 
     noresize scrolling ="no">
  </frameset>
</frameset>

Don't trust me, than click here and watch it in action. Or try it with the new Netscape and Microsoft tags to take away the frames. Make sure to look at each individual page to see how the tags are layed out, especially the &ltbase target="*"> after the &ltbody> tags in each of the plain.html pages.

Well, I hope this has been helpful. Good luck, and remember to be patient and keep trying. It took me 3 weeks to get my first framed page to werk. Hopefully, it won't take you as long. Good luck!

Return Home